// import { NavLink } from 'react-router-dom'
import { useState, useEffect } from 'react'
import { Table, Button, Modal } from 'antd';
import type { TableProps } from 'antd';
import MemberInfo from '../components/BlindDatesMember/MemberInfo';
import useJwt from '../UseJwt';

interface DataType {
  id: number;
  name: string;
  gender: string;
  age: number;
  dateOfBirth: string;
  date_of_birth?: string;
}

const columns: TableProps<DataType>['columns'] = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '出生日期',
    dataIndex: 'dateOfBirth',
    key: 'idateOfBirthd',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
];

function Home() {
  const [blindDatesMemberList, setBlindDatesMemberList] = useState<DataType[]>()
  const [visible, setVisible] = useState(false)
  const [memberInfo, setMemberInfo] = useState({})
  const disabled = false
  // 获取相亲人员列表
  const getBlindDatesMemberList = async () => {
    const { data } = await useJwt.getBlindDatesMemberList()
    const memberList = data.map((memberItem: DataType) => {
      return {
        ...memberItem,
        dateOfBirth: memberItem.date_of_birth || '',
        age: memberItem.date_of_birth ? (new Date()).getFullYear() - (new Date(memberItem.date_of_birth)).getFullYear() + 1 : ''
      }
    })
    // 更新相亲列表
    setBlindDatesMemberList(memberList)
  }

  // 点击添加按钮
  const handleAdd = () => {
    setVisible(true)
  }

  // 点击确定按钮
  const handleOk = () => {}

  // 点击取消按钮
  const handleCancel = () => {
    setVisible(false)
  }

  // 点击表格
  const handleRow = (record: any) => {
    setMemberInfo(record)
    setVisible(true)
  }


  useEffect(() => {
    getBlindDatesMemberList()
  }, []);

  return (
    <>
      <div className='p-2'>
        <div className="mb-2 flex justify-end">
          <Button
            type="primary"
            onClick={handleAdd}
          >
            添加
          </Button>
        </div>
        <Table
          rowKey="id"
          bordered
          columns={columns}
          dataSource={blindDatesMemberList}
          onRow={(record) => {
            return {
              onClick: () => {
                handleRow(record)
              }, // 点击行
            };
          }}
        />

        <Modal
          title="新增用户"
          open={visible}
          onOk={handleOk}
          onCancel={handleCancel}
          cancelText="取消"
          okText="确定"
        >
          <MemberInfo
            disabled={disabled}
            memberInfo={memberInfo}
          />
        </Modal>
      </div>
    </>
  )
}

export default Home
